<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 750px"></div>
    <div class="banner">
      <h1>优诚易品</h1>
      <h6>
        &ensp;&ensp;YOU&ensp;&ensp;&ensp;CHENG&ensp;&ensp;&ensp;&ensp;YI&ensp;&ensp;&ensp;&ensp;&ensp;PING
      </h6>
      <p>致力于创造属于大学生的二手平台</p>
<!--      <p></p>-->
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import WAVES from "vanta/src/vanta.waves";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = WAVES({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.WAVES({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      color: 0x5f88,
      shininess: 76.0,
      waveHeight: 12.0,
      waveSpeed: 0.95,
      zoom: 0.89,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>




<!--<template>-->
<!--  <div>-->
<!--    <el-container>-->
<!--      &lt;!&ndash;左&ndash;&gt;-->
<!--      <el-aside style="width: 400px">-->
<!--        <el-container>-->
<!--          <el-header-->
<!--            class="allleft"-->
<!--            style="width:360px;-->
<!--              height:200px;-->
<!--              margin: 10px 0 0 10px;-->
<!--              background-color: white">-->
<!--            <el-container style="height: 130px;padding-top: 10px">-->
<!--              &lt;!&ndash;头像&ndash;&gt;-->
<!--              <el-aside style="width: 40%; background-color: white" >-->
<!--                <el-col :span="12">-->
<!--                  <div class="demo-basic&#45;&#45;circle" >-->
<!--                    <div style="padding: 20px 0 0 20px;">-->
<!--                      <el-avatar :size="50" :src="circleUrl"></el-avatar>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--              </el-aside>-->
<!--              &lt;!&ndash;信息&ndash;&gt;-->
<!--              <el-aside style="width: 60%;height:110px;padding: 40px 0 0 40px; background-color: white">-->
<!--                <a>用户名</a><br/>-->
<!--                <a>用户类型</a>-->
<!--              </el-aside>-->
<!--            </el-container>-->
<!--            <el-container  style="height: 50px;padding: 20px 0 0 20px">-->
<!--              <a>上次登录时间:</a>-->
<!--            </el-container>-->
<!--            &lt;!&ndash;空白&ndash;&gt;-->
<!--          </el-header>-->
<!--          <el-container-->
<!--            class="allleft"-->
<!--            style="width:360px;-->
<!--            height: 480px;-->
<!--            background-color: white;-->
<!--            margin: 10px 0 0 10px;">-->
<!--            <el-main style="color: #939090;font-size: 18px;line-height: 30px">-->
<!--              <div style="margin-top: 40px">-->
<!--                <div  style="font-size: 22px;text-align: center; ">文嘉《明日歌》</div>-->
<!--                <div style="font-size: 20px;text-align: center; ">明日复明日</div>-->
<!--                <div style="font-size: 20px;text-align: center;">明日何其多</div>-->
<!--                <div style="font-size: 20px;text-align: center;">我生待明日</div>-->
<!--                <div style="font-size: 20px;text-align: center;">万事成蹉跎</div>-->
<!--                <div style="margin-top: 40px;"></div>-->
<!--              </div>-->
<!--              <div style="margin-top: 110px;">-->
<!--                <el-statistic-->
<!--                  ref="statistic"-->
<!--                  format="HH:mm:ss"-->
<!--                  :value="deadline"-->
<!--                  title="距离明天："-->
<!--                  time-indices-->
<!--                ></el-statistic>-->
<!--              </div>-->

<!--            </el-main>-->
<!--          </el-container>-->

<!--        </el-container>-->
<!--      </el-aside>-->
<!--      &lt;!&ndash;中&ndash;&gt;-->
<!--      <el-aside style="width:670px">-->
<!--        <el-container style="height: 700px;margin:10px 0 0 10px">-->
<!--          &lt;!&ndash;数据展示&ndash;&gt;-->
<!--          <el-header class="allcenter" style="height:120px;">-->
<!--            <div style="margin-top: 40px;font-size: 20px">-->
<!--              <el-row :gutter="20">-->
<!--                <el-col :span="6">-->
<!--                  <div>-->
<!--                    <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col :span="6">-->
<!--                  <div>-->
<!--                    <el-statistic title="男女比">-->
<!--                      <template slot="formatter"> 456/2 </template>-->
<!--                    </el-statistic>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col :span="6">-->
<!--                  <div>-->
<!--                    <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">-->
<!--                      <template slot="prefix">-->
<!--                        <i class="el-icon-s-flag" style="color: red"></i>-->
<!--                      </template>-->
<!--                      <template slot="suffix">-->
<!--                        <i class="el-icon-s-flag" style="color: blue"></i>-->
<!--                      </template>-->
<!--                    </el-statistic>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col :span="6">-->
<!--                  <div>-->
<!--                    <el-statistic :value="like ? 521 : 520" title="Feedback">-->
<!--                      <template slot="suffix">-->
<!--              <span @click="like = !like" class="like">-->
<!--                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>-->
<!--                <i class="el-icon-star-off" v-show="!like"></i>-->
<!--              </span>-->
<!--                      </template>-->
<!--                    </el-statistic>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->
<!--          </el-header>-->
<!--          &lt;!&ndash;&ndash;&gt;-->
<!--          <el-header  style="height: 350px;margin: 5px 5px 15px 5px">-->

<!--            <el-tabs type="border-card" style="margin:10px 0 10px -22px">-->
<!--              <el-tab-pane label="景区公告" style="line-height: 5px">-->
<!--                <p>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</p>-->
<!--                <el-divider></el-divider>-->
<!--                <p>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</p>-->
<!--                <el-divider></el-divider>-->
<!--                <p>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</p>-->
<!--                <el-divider></el-divider>-->
<!--                <p>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</p>-->
<!--              </el-tab-pane>-->
<!--              <el-tab-pane label="管理公告"></el-tab-pane>-->
<!--              <el-tab-pane label="安全消防"></el-tab-pane>-->
<!--              <el-tab-pane label="任务通知"></el-tab-pane>-->
<!--            </el-tabs>-->

<!--          </el-header>-->
<!--          &lt;!&ndash;轮播图&ndash;&gt;-->
<!--          <el-footer class="allcenter" style="height: 200px">-->
<!--            <div class="block">-->
<!--              <el-carousel height="100%" class="lunbo">-->
<!--                <el-carousel-item v-for="(item,index) in imgs" :key="index">-->
<!--                  <img class="imgs_box"  :src="item.url"/>-->
<!--                </el-carousel-item>-->
<!--              </el-carousel>-->
<!--            </div>-->
<!--          </el-footer>-->
<!--        </el-container>-->
<!--      </el-aside>-->
<!--      &lt;!&ndash;右&ndash;&gt;-->
<!--      <el-aside style="width: 400px">-->
<!--        <el-container class="tianqi">-->
<!--          <el-header-->
<!--            class="tianqihead"-->
<!--            style="height: 300px;-->
<!--          border-top-left-radius: 10px;-->
<!--          border-top-right-radius: 10px;">-->
<!--            <el-container style="margin-top: 20px">-->
<!--              <el-header style="height: 70px;padding: 10px 0 0 30px"> 欢迎登录优诚易品管理系统</el-header>-->
<!--              <el-header style=" height:30px;font-size: 14px;">上次登录时间:</el-header>-->
<!--              <el-header style="height: 100px">-->
<!--                <el-container style="height: 100px">-->
<!--                  <div style="width: 100px; font-size: 40px;padding: 40px 10px 0 0;float: left;">{{ list.tempMax }}℃</div>-->
<!--                  <div style="width: 60px;font-size: 8px;padding-top: 40px;line-height: 20px;float: left;">-->
<!--                    <a>宜昌</a><br/>-->
<!--                    <a>{{list.textDay}}</a>-->
<!--                  </div>-->
<!--                  <div style="width: 150px;padding: 30px 0 0 20px;float: left;">-->
<!--                    <a style="padding-left: 30px"></a><br/>-->
<!--                    <a>{{list.fxDate}}</a>-->
<!--                  </div>-->
<!--                </el-container>-->
<!--              </el-header>-->
<!--            </el-container>-->
<!--          </el-header>-->
<!--          <el-main-->
<!--            style="height: 420px;-->
<!--            background-color: white;-->
<!--           border-bottom-left-radius: 10px;-->
<!--           border-bottom-right-radius: 10px">-->
<!--            <el-calendar></el-calendar>-->
<!--          </el-main>-->
<!--        </el-container>-->
<!--      </el-aside>-->

<!--    </el-container>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import * as THREE from 'three'-->
<!--import Net from 'vanta/src/vanta.net'-->
<!--import axios from 'axios'-->

<!--export default {-->
<!--  name: 'Page',-->
<!--  data() {-->
<!--    return {-->
<!--      circleUrl: 'https://schoolspring.oss-cn-beijing.aliyuncs.com/usericon/image_editor_1681214663080.jpg',-->
<!--      list: [],-->
<!--      // 图形化公示-->
<!--      like: true,-->
<!--      value1: 4154.564,-->
<!--      value2: 2222,-->
<!--      title: '用户',-->
<!--      // 时间倒数-->
<!--      deadline: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),-->
<!--      imgs: [-->
<!--        {url: 'https://schoolspring.oss-cn-beijing.aliyuncs.com/static/banner/1.png', },-->
<!--        {url: 'https://schoolspring.oss-cn-beijing.aliyuncs.com/static/banner/2.png', },-->
<!--        {url: 'https://schoolspring.oss-cn-beijing.aliyuncs.com/static/banner/3.png', },-->
<!--      ]-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.WeatherSeacrh()-->
<!--  },-->
<!--  mounted() {-->
<!--    this.vantaEffect = Net({-->
<!--      el: this.$refs.vantaRef,-->
<!--      THREE: THREE-->
<!--    })-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    if (this.vantaEffect) {-->
<!--      this.vantaEffect.destroy()-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    WeatherSeacrh() {-->
<!--      const url =-->
<!--        `https://devapi.qweather.com/v7/weather/3d?location=101010100&key=219539f5555a422c89aa5c656d085d9f`-->
<!--      // 使用axios发送ajax请求获取数据-->
<!--      axios.get(url).then(response => {-->
<!--        // 请求成功-->
<!--        console.log(response)-->
<!--        this.list = response.data.daily[0]-->
<!--      }).catch(error => {-->
<!--        // 请求失败-->
<!--        console.log(error)-->
<!--      })// axios-end-->
<!--    }-->

<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss">-->
<!--//通用属性-->
<!--.el-container{-->
<!--  //background-color: #20a0ff;-->
<!--}-->
<!--.el-aside{-->
<!--  //background-color: blanchedalmond;-->
<!--}-->
<!--.el-header, .el-footer{-->
<!--  //background-color: #bfcbd9;-->
<!--}-->
<!--.el-main{-->
<!--  //background-color: white;-->
<!--}-->
<!--//主右-->
<!--//日历-->
<!--el-calendar{-->
<!--  font-size: 12px;-->
<!--}-->
<!--.el-calendar__header{-->
<!--  font-size: 12px;-->
<!--  padding: 0;-->
<!--}-->
<!--.el-button&#45;&#45;mini, .el-button&#45;&#45;mini.is-round {-->
<!--  padding: 5px 5px;-->
<!--  font-size: 9px;-->
<!--}-->
<!--.el-calendar-table{-->
<!--  font-size: 12px;-->
<!--}-->
<!--.el-calendar-table .el-calendar-day {-->
<!--  height: 30px;-->
<!--  padding: 0  0 0 8px;-->
<!--}-->

<!--//天气-->
<!--.tianqi{-->
<!--  width: 90%;-->
<!--  height: 700px;-->
<!--  border-radius: 10px;-->
<!--  border: 1px solid #bfcbd9;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--  margin: auto;-->
<!--  margin-top: 10px;-->
<!--}-->
<!--.tianqihead{-->
<!--  background-image: url("https://testkkzc.oss-cn-beijing.aliyuncs.com/multipartFile/1.jpg");-->
<!--}-->
<!--//主中-->
<!--.allcenter{-->
<!--  width: 620px;-->
<!--  border-radius: 10px;-->
<!--  border: 1px solid #b8b4b4;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--  margin: 2px;-->
<!--}-->
<!--//-&#45;&#45;&#45;&#45;&#45;&#45;上-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!--.el-tabs&#45;&#45;border-card{-->
<!--  width: 620px;-->
<!--  border:1px solid #b8b4b4;-->
<!--  border-radius: 10px;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--}-->
<!--//-&#45;&#45;&#45;&#45;走马灯-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!--.el-carousel__item h3 {-->
<!--  color: #475669;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  font-size: 14px;-->
<!--  text-align: center;-->
<!--  opacity: 0.75;-->
<!--  line-height: 150px;-->
<!--  margin: 0;-->
<!--}-->
<!--.el-carousel__item:nth-child(2n) {-->
<!--  background-color: #99a9bf;-->
<!--}-->

<!--.el-carousel__item:nth-child(2n+1) {-->
<!--  background-color: #d3dce6;-->
<!--}-->
<!--.lunbo{-->
<!--  margin-left: -20px;-->
<!--  width: 620px;-->
<!--  height: 200px;-->
<!--  border:1px solid #b8b4b4;-->
<!--  border-radius: 10px;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--}-->
<!--//主左-->
<!--.allleft{-->
<!--  border:1px solid #b8b4b4;-->
<!--  border-radius: 10px;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--}-->
<!--.like {-->
<!--  cursor: pointer;-->
<!--  font-size: 25px;-->
<!--  display: inline-block;-->
<!--}-->
<!--.el-statistic .con .number {-->
<!--  font-size: 25px;-->
<!--}-->
<!--.imgs_box{-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--}-->
<!--</style>-->
